<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >人员出勤设置</el-button
          >
        </div>
        
        <div v-show="isShow1 == true">
          <tr>
               <tr>
            <td>部门：</td>
            <td>
               <el-select v-model="depname" clearable placeholder="全部">
               <el-option
                v-for="item in drop_down"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            </td>
            <td>年份：</td>
            <td>
              <el-select
                v-model="year"
                clearable
                placeholder="请选择"
              >
                <el-option :label="2017" :value="2017"></el-option>
                <el-option :label="2018" :value="2018"></el-option>
                <el-option :label="2019" :value="2019"></el-option>
                <el-option :label="2020" :value="2020"></el-option>
                <el-option :label="2021" :value="2021"></el-option>
                <el-option :label="2022" :value="2022"></el-option>
              </el-select>
            </td>
             <td>用户：</td>
            <td>
               <el-input v-model="username"></el-input>
            </td>
            <td>
              <el-button type="primary" @click="GetAllEmployeeAttendanceSettingsPo()"  >查询</el-button>
            </td>
          </tr>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >人员信息列表</el-button
          >
          <el-button
            style="float: right; padding: 3px 0;color:red"
            type="text"
            @click="UpdateEmployeeAttendanceSettingsPo()"
            >保存</el-button
          >
        </div>
        <div>
          <el-table
    :data="tableData"
    border
    style="width: 100%"  >
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="50">
    </el-table-column>
      <el-table-column
      prop="user_name"
      label="姓名"
      width="120">
    </el-table-column>
     <el-table-column
      label="1月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.oneon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.oneunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="2月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.twoon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.twounder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="3月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.threeon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.threeunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="4月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.fouron"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.fourunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="5月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.fiveon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.fiveunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="6月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.sixon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.sixunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="7月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.sevenon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.sevenunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="8月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.eighton"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.eightunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="9月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.nineon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.nineunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="10月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.tenon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.tenunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="11月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.elevenon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.elevenunder"></el-input>
      </template>
    </el-table-column>
     <el-table-column
      label="12月"
      width="160">
      <template slot-scope="scope">
      上班:<el-input style="width:100px" v-model="scope.row.twelveon"></el-input><br>
      下班:<el-input style="width:100px" v-model="scope.row.twelveunder"></el-input>
      </template>
    </el-table-column>
  </el-table>  
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { GetAllDepartment,GetAllEmployeeAttendanceSettingsPo,UpdateEmployeeAttendanceSettingsPo} from "./AttendanceManagementApi";
export default {
  data() {
    return {
      depname:null,
      personnel:null,
      year:2022,
      username:null,
       drop_down:[],
      tableData: [],
      options: [],
      isShow1: true, 
      isShow2: true, 
    };
  },
   created() {
    this.GetAllDepartment();
  },
  methods: {
     GetAllDepartment(){
      GetAllDepartment().then((res)=>{
      this.drop_down=res.data;
      var a=res.data;
         a.forEach(r => {
        this.depname=r;
        return;
      });
      this.GetAllEmployeeAttendanceSettingsPo();
      })
    },
    GetAllEmployeeAttendanceSettingsPo(){
      GetAllEmployeeAttendanceSettingsPo(this.depname,this.year,this.username).then((res)=>{
       this.tableData=res.data;
      })
    },
    UpdateEmployeeAttendanceSettingsPo(){
        UpdateEmployeeAttendanceSettingsPo(this.tableData).then((res)=>{
            if(res.data>0){
                alert("保存成功")
                this.router.go();
            }
            else{
                alert("没有新的更改")
            }
        })
    }
  },
};
</script>